<!DOCTYPE html>
<html lang="en">

<head>
    <title>巡检工作表</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/patrolWork.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">巡检工作表</div>
        </div>
        <div class="app_main">
            <div class="app_mainItem">
                <div class="app_mainItem_label">巡检项目<span>*</span></div>
                <div class="app_mainItem_inp">
                    <div :style="{color:form.patrolPage.length==0  ?'#D1D1D1':'#000'}">{{ form.patrolPage.length ||
                        '去填写' }}<span class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_mainItem">
                <div class="app_mainItem_label">巡检结果<span>*</span></div>
                <div class="app_mainItem_inp1">
                    <div :class="[form.patrolState == 1?'app_mainItem_inpActive':'app_mainItem_inpDefault']"
                        @click="form.patrolState = 1">正常</div>
                    <div :class="[form.patrolState == 2?'app_mainItem_inpActive':'app_mainItem_inpDefault']"
                        @click="form.patrolState = 2">异常</div>
                </div>
            </div>
            <div class="app_mainTitle">异常情况说明</div>
            <div class="app_mainItem2">
                <nut-textbox v-model="form.note" :place-text="'请输入异常情况说明'"></nut-textbox>
            </div>
            <div class="app_mainTitle">签名<span>*</span></div>
            <div class="signDom">
                <div v-if="form.signImg != ''" class="signDomItem">
                    <img :src="form.signImg" alt="">
                </div>
                <div v-else class="signDomItem" @click="signShow = true">
                    <div class="icon">
                        <span class="iconfont icon-bianji-gangbi"></span>
                    </div>
                    <div class="txt">点击签名</div>
                </div>
            </div>
            <div class="app_mainItem2"></div>
            <div class="app_mainTitle">异常处理</div>
            <div class="app_mainItem">
                <div class="app_mainItem_label">发起保养</div>
                <div class="app_mainItem_inp">
                    <div :style="{color:form.maintain.length==0  ?'#D1D1D1':'#000'}">{{ form.maintain.length || '去填写'
                        }}<span class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <div class="app_mainItem">
                <div class="app_mainItem_label">发起维修</div>
                <div class="app_mainItem_inp">
                    <div :style="{color:form.repair.length==0 ?'#D1D1D1':'#000'}">{{ form.repair.length || '去填写' }}<span
                            class="iconfont icon-arrow-right-bold"></span></div>
                </div>
            </div>
            <nut-button block>完成</nut-button>
        </div>
        <!-- <nut-signature :lineWidth="lineWidth" @confirm="confirm" @clear="clear"></nut-signature> -->
        <!-- 签名弹窗 -->
        <nut-popup v-model="signShow" position="bottom" :style="{ height: '30vh' }">
            <div>
                <nut-signature :lineWidth="lineWidth" @confirm="confirm" @clear="clear"></nut-signature>
            </div>
        </nut-popup>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                signShow: false,
                lineWidth: '1',
                form: {
                    patrolPage: [],  //巡检项目
                    patrolState: 1,  //巡检结果
                    note: '',  //异常情况说明
                    signImg: '',  //签名
                    maintain: [],  //发起保养
                    repair: [],  //发起维修
                }
            },
            mounted() { },
            methods: {
                back() {
                    window.history.go(-1)
                },
                confirm(canvas, data) {
                    let img = document.createElement('img');
                    img.src = data;
                    // document.querySelector('.demo').appendChild(img);
                    this.form.signImg = data
                    this.signShow = false
                },
                clear() {
                    let img = document.querySelector('.demo img');
                    if (img) {
                        img.remove();
                    }
                }
            }
        })
    </script>
</body>

</html>